<template>
  <!-- 我的奖项页面 -->

     <div class="myawards">
      <el-button type="primary" class="builtactive" @click="AddAwards">添加获奖情况</el-button>
      <el-row>
        <el-col :span="12">
          <el-table class="Awardstable" :data="OrganizationList.slice((currentPage-1)*pageSize,currentPage*pageSize)" height="560" border>
            <el-table-column
              prop="contestName"
              label="竞赛全称">
            </el-table-column>
            <el-table-column
              prop="acquisitionTime"
              label="获奖时间">
            </el-table-column>
              <el-table-column
              prop="grade"
              label="奖项等级">
            </el-table-column>
            <el-table-column
              prop="level"
              label="奖项级别">
            </el-table-column>
          </el-table>
          <div class="paginationBlock">
            <el-pagination  @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage" :page-size="pageSize"
            layout="total,prev, pager, next,jumper" :total="total">
            </el-pagination>
          </div>
        </el-col>
        <el-col :span="12" class="award_statistics">
          <div id="statistic_pie" class="pie">

          </div>
          <div id="statistic_histogram" class="histogram"></div>
        </el-col>
      </el-row>
      <AwardsAdd @Organization="Organization"  v-show="showAwards" ref="awards"></AwardsAdd>
      
  </div>

</template>

<script>
// import axios from "axios"
import AwardsAdd from "./awardsadd.vue"
export default {
  components:{
    AwardsAdd
  },

  data(){
    return{
      contestName: "",//比赛全称
      level: "",//奖项级别
      grade: "",//奖项等级
      acquisitionTime: "",//获取时间
      OrganizationList:[],
      showAwards:false,
      total:0,
      currentPage: 1,
      //后端 pageNum 当前页面
      //     pageSize ，每页显示数量
      pageSizes:[100, 200, 300, 400],
      pageSize: 7,
    }
  },
  mounted(){
    this.Organization()
    this.statistical()
  },
  methods:{
    Organization(){//获取我的奖项列表
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        method:"get",
        // url:"api/award/getAwardList",
        url:`/award/getAwardList?pageNum=${this.currentPage}&pageSize=${this.pageSize}`,
      }).then(res=>{
        // console.log(res)
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        this.OrganizationList = res.data.data.list
        this.Authentication = res.data.data
        this.total = res.data.data.totals
        // console.log(this.OrganizationList)
        this.OrganizationList.forEach(item=>{
          item.acquisitionTime = item.acquisitionTime.replace(/(\d{4}-\d{2}-\d{2})\s\d{2}:\d{2}:\d{2}/, "$1");
        })
      })
    },
   AddAwards(){//点击新建获奖情况
      this.showAwards = true
      this.$nextTick(() => {
        this.$refs.awards.init()
      })
    },
    handleCurrentChange(val){//点击获取页码
      this.currentPage = val
      this.Organization()
      this.currentPage = 1
    },
    handleSizeChange(val) {
      this.pageSize = val
      this.currentPage = 1
    },
    statistical(){//统计图
      var num = []
      var nameList = []
      this.axios({
        headers:{'Authentication':localStorage.getItem('token')},
        url:"/award/getSectorInfo",
        method:"get",
      }).then(res=>{
        if(res.data.code != 20001){
          return this.$message.error(res.data.msg)
        }
        this.staticList = res.data.data
        var objPir = []
        var sum=0//总数
        this.staticList.forEach(element => {
          sum += element.count
          // console.log(element.politicsName)
          num.push(element.count)
          nameList.push(element.categoryName)
        });
        this.staticList.forEach(element => {
          var obj={}
          obj.value = element.count / sum
          obj.name = element.categoryName
          objPir.push(obj)
        })
        var optionsum={//柱状图
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          grid: {
            left: '3%',
            right: '10%',
            bottom: '3%',
            containLabel: true
          },
          tooltip:{
            trigger:'axis',
            extraCssText: "width:100px;",
          },
          xAxis: [
            {
              type: 'category',
              data:nameList,
              // axisTick: {
              //   alignWithLabel: true
              // },
              axisLabel:{
                interval:0,
                // rotate:-10
              },
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],
          series: [
            {
              name: '人数',
              type: 'bar',
              // barWidth: '60%',
              data:num
            }
          ]
        }
        var myChart = this.$echarts.init(document.getElementById('statistic_histogram'))
        myChart.setOption(optionsum)
        var optionPie={//饼图
          title: {
            text: '校内奖项类型占比统计',
            left: 'center'
          },
          tooltip:{
            trigger: 'item',
            extraCssText: "width:200px;",
            formatter: function(arg){
              return arg.name+'占比：'+Math.round(arg.percent*100)/100+'% '}
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '占比',
              type: 'pie',
              radius: '50%',
              data:objPir,
                itemStyle: {
                  emphasis:{
                    shadowBlur: 10,
                    shadowOffsetX: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)'
                  },
                  normal:{
                    label:{
                      // position:'inner',
                      show:true,
                      formatter:'{d}%'
                    },
                    labelLine:{show:true}
                  }
                }
            }
          ]
        }
        var myChartpie = this.$echarts.init(document.getElementById('statistic_pie'))
        myChartpie.setOption(optionPie)
      })
    },
  }
}
</script>

<style lang="scss">
.myawards{
  .paginationBlock{
    width: 50%;
    // border: 1px solid #000;
    position: absolute;
    bottom: 2vh;
    /* 设置分页的背景颜色为none */
    .el-pager li{
      background: none;
    }
    .btn-next,.btn-prev{
      background: none;
    }
  }
  .el-pagination{
    text-align: center;
  }
  .builtactive{
    margin-bottom: 2vh;
  }
  .award_statistics{
    height: 560px;
    // border: 1px solid #000;
    .pie{
      padding: 15px;
      margin-left: 1vw;
      background: #fff;
      height: 49%;
    }
    .histogram{
      // width: 620px;
      height: 49.4%;
      background: #fff;
      margin-top: 1vh;
      margin-left: 1vw;
    }
  }
}
.Awardstable .cell{
  text-align: center;
}

</style>